<config lang="json">
{
  navigationBarTitleText: '任务列表',
  usingComponents: {

  }
}
</config>

<template>
  <div>
    <view class="d-flex task-quarter-header border-bottom mb-3">
      <div class="mr-auto ml-2 ">{{group.year}}·{{group.quarter}}季度</div>
      <div class="d-flex  align-items-center mr-2">
        <img :src="'score-icon2.png'|imgUrl" class="score-icon2" />
        <span>得分: <span style="color:#ff790c">{{group.score}}</span>分</span>
      </div>
    </view>
    <van-tabs type="card" color="#ff790c">
      <van-tab :title="competeTabString">
        <TaskList :tasks="competeTask"></TaskList>
      </van-tab>
      <van-tab :title="unCompeteTabString">
        <TaskList :tasks="unCompeteTask"></TaskList>
      </van-tab>
      <van-tab :title="otherTabString">
        <TaskList :tasks="otherTask"></TaskList>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator'
import { Getter, Action } from 'vuex-class'
import TaskList from '@/components/TaskList.vue'
@Component({
  components: {
    TaskList
  },
  filters: {}
})
export default class StudentTasks extends Vue {
  public year: number;
  public quarter: number;
  @Getter getGroupByQuarter;
  @Getter getTasksByQuarter;
  @Action getStudyTaskByQuarter;
  public get tasks () {
    var r = this.getTasksByQuarter(this.year, this.quarter)
    if (!r) {
      return null
    }
    this.$globalData.orderByTasks(r.items)
    return r.items
  }

  public get unCompeteTabString () {
    var count = !this.unCompeteTask ? 0 : this.unCompeteTask.length
    return '未完成(' + count + ')'
  }
  public get competeTabString () {
    var count = !this.competeTask ? 0 : this.competeTask.length
    return '已完成(' + count + ')'
  }
  public get otherTabString () {
    var count = !this.otherTask ? 0 : this.otherTask.length
    return '其他(' + count + ')'
  }

  public get competeTask () {
    return (
      this.tasks &&
      this.tasks.filter(e => {
        return e.status === 2
      })
    )
  }
  public get unCompeteTask () {
    return (
      this.tasks &&
      this.tasks.filter(e => {
        return e.status === 1 || e.status === 3
      })
    )
  }

  public get otherTask () {
    return (
      this.tasks &&
      this.tasks.filter(e => {
        return e.status !== 1 && e.status !== 1 && e.status !== 3
      })
    )
  }

  public get group () {
    return this.getGroupByQuarter(this.year, this.quarter)
  }

  public async created () {
    this.year = parseInt(this.$mp.options['year'])
    this.quarter = parseInt(this.$mp.options['quarter'])
    if (this.tasks == null) {
      await this.getStudyTaskByQuarter({
        year: this.year,
        quarter: this.quarter
      })
    }
  }
  public onShow () {}
}
</script>

<style lang="stylus" scoped></style>
